<template>
	<div class="zhouguanli flex animate__animated animate__fadeIn">



      <div style="width: 380px; height: 100vh; padding: 20px; background: #FFFFFF; overflow: auto; position: relative;">
        <el-tree  class="filter-tree" @node-click="handleNodeClick" @node-contextmenu="openMenu" :data="data" :props="defaultProps" node-key="treeId"
                  :default-expanded-keys="zhankaiarray" @node-expand="handleNodeExpand" @node-collapse="handleNodeCollapse" :filter-node-method="filterNode" ref="tree">
        </el-tree>

        <div v-show="menuVisible" class="custom-menu" :style="{left: menuPosition.x + 'px', top: menuPosition.y + 'px'}" >
          <div class="li" @click="logshow" v-if="youjiandangqian.type == 1">添加轴管理</div>
        </div>
      </div>

      <div class="youbian" style="padding: 30px 0; width: calc(100vw - 640px);">

        <div style="padding:0 30px;">
            <el-table :data="list" style="width: 100%;">
              <el-table-column align="center" prop="axleNote" label="轴描述"></el-table-column>
              <el-table-column align="center" prop="yeNote" label="叶片描述"></el-table-column>
              <el-table-column align="center" prop="yeNum" label="叶片数"></el-table-column>
              <el-table-column align="center" prop="produceName" label="轴承"></el-table-column>
              <el-table-column align="center" prop="libNote" label="轴承描述"></el-table-column>

              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <div class="flexcc">
                    <div style="color: #0093F6; cursor: pointer; margin: 0 10px;" @click="bianji(scope.row)">修改</div>
                    <div style="color: #f00; cursor: pointer; margin: 0 10px;" @click="shanchu(scope.row)">删除</div>

                  </div>
                </template>
              </el-table-column>
            </el-table>

            <!-- <el-pagination style="padding: 20px; text-align: right;"
              @current-change="fanye"
              background
              :page-size="search.size"
              layout="total,prev, pager, next"
              :total="total">
            </el-pagination> -->
        </div>
      </div>





    <el-dialog :title="logtitle" center :visible.sync="log" width="600px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>轴描述</div>
          <div><el-input v-model="all.axleNote" style="width: 350px; margin-left: 30px;" placeholder="请输入轴描述"></el-input></div>
        </div>

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>叶片描述</div>
          <div><el-input v-model="all.yeNote" style="width: 350px; margin-left: 30px;" placeholder="请输入叶片描述"></el-input></div>
        </div>

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>叶片数</div>
          <div><el-input v-model="all.yeNum" type="number" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" style="width: 350px; margin-left: 30px;" placeholder="请输入叶片数"></el-input></div>
        </div>

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>轴承</div>
          <div><el-input v-model="dangqian2.produceName" style="width: 350px; margin-left: 30px;" placeholder="请选择轴承" readonly @focus="zhoushow()"></el-input></div>
        </div>

        <div class="flexc" style="margin-bottom: 20px;">
          <div style="width: 100px; text-align: right;"><span style="color: #f00; margin-right: 5px;">*</span>轴承描述</div>
          <div><el-input v-model="all.libNote" style="width: 350px; margin-left: 30px;" placeholder="请输入轴承描述"></el-input></div>
        </div>


    	  <span slot="footer" class="dialog-footer">
          <el-button type="danger" round @click="log = false">取消</el-button>
          <el-button type="danger" round @click="add">确定</el-button>
    	  </span>
    </el-dialog>
    <el-dialog title="选择轴承" center :visible.sync="log2" width="1200px"  :close-on-click-modal="false" :close-on-press-escape="false" :modal-append-to-body="true">
      <div class="flexc" style="padding:30px;">
        <div><el-input v-model="search2.param.produceName" style="width: 200px; margin-right: 20px;" placeholder="请输入制造厂商"></el-input></div>
        <div>
          <el-input v-model="search2.param.model" style="width: 200px; margin-right: 20px;" placeholder="请输入型号"></el-input>
        </div>
        <el-button type="primary" @click="search2go()">检索</el-button>
      </div>

      <el-table :data="list2" style="width: 100%;" highlight-current-row @current-change="handleCurrentChange">
        <el-table-column align="center" prop="produceName" label="制造厂商"></el-table-column>
        <el-table-column align="center" prop="model" label="型号"></el-table-column>
        <el-table-column align="center" prop="rollerNum" label="滚动体数目"></el-table-column>
        <el-table-column align="center" prop="rollerJing" label="滚柱直径"></el-table-column>
        <el-table-column align="center" prop="jyJing" label="节圆直径"></el-table-column>
        <el-table-column align="center" prop="wyJing" label="外圆直径"></el-table-column>
        <el-table-column align="center" prop="width" label="宽度"></el-table-column>
        <el-table-column align="center" prop="jcj" label="接触角"></el-table-column>
        <el-table-column align="center" prop="rpm" label="转速"></el-table-column>
        <el-table-column align="center" prop="bpfo" label="BPFO"></el-table-column>
        <el-table-column align="center" prop="bpfi" label="BPFI"></el-table-column>
        <el-table-column align="center" prop="ftfo" label="FTFO"></el-table-column>
        <el-table-column align="center" prop="ftfi" label="FTFI"></el-table-column>
        <el-table-column align="center" prop="bsf" label="BSF"></el-table-column>


      </el-table>
      <el-pagination style="padding: 20px; text-align: right;"
        @current-change="fanye2"
        background
        :page-size="search2.size"
        layout="total,prev, pager, next"
        :total="total2">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button type="danger" round @click="log2 = false">取消</el-button>
        <el-button type="danger" round @click="log2go">确定</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
import { gettreeshebei } from '@/api/xitong'

import { addaxle,removeaxle,updateaxle,getaxle,getaxleone,getbearingLib } from '@/api/zhoucheng'
  // import { getxiala } from '@/api/zidian'
  import left2 from '@/view/left2.vue'
	export default {
		name: 'zhouguanli',
    components:{
      left2
    },
		data() {
			return {
        all:{
          "axleId": "",
          "devId":"",
          "axleNote":"",
          "yeNote":"",
          "yeNum":"",
          "libId":"",
          "libNote":""
        },
        list:[],
        search:"",
        search2:{
            "page":1,
            "size":10,
            "param":{
              "produceName":"",
              "model":"",
            }
        },
        total2:0,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        total:0,

        log:false,
        logtitle:"",

        log2:false,
        list2:[],
        dangqian:{
          "axleId": "",
          "devId": "",
          "axleNote": "",
          "yeNote": "",
          "yeNum": "",
          "produceName": "",
          "model": "",
          "libNote": ""
        },
        dangqian2:{
          "axleId": "",
          "devId": "",
          "axleNote": "",
          "yeNote": "",
          "yeNum": "",
          "produceName": "",
          "model": "",
          "libNote": ""
        },

        dangqianxuanzeshebei:"",

        xialaall:{
          devStatelist:"",
          strategylist:""
        },
        data:[],

        menuVisible: false,
        menuPosition: { x: 0, y: 0 },

        youjiandangqian:"",
        zhankaiarray:[]
			}
		},
		created() {
      this.getshebi()
      this.getlist2()
		},
		mounted() {

		},
		methods: {
      //选择轴承翻页
      fanye2:function(val){
        this.search2.page = val
        this.getlist2()
      },
      //选择轴承搜索
      search2go:function(){
        this.search2.page = 1
        this.getlist2()
      },
      //选择轴承点击
      handleCurrentChange(val) {
        this.dangqian = val
      },
      //选择轴承点击确定
      log2go:function(){
        this.dangqian2 = this.dangqian
        this.all.libId = this.dangqian2.libId
        this.log2 = false
      },
      //选择轴承弹框
      zhoushow:function(){
        this.dangqian = ""
        this.log2 = true
      },
      //获取轴承
      getlist2:function(){
        console.log(this.search2)
        getbearingLib(this.search2).then((response)=>{
          this.list2 = response.data.result
        })
      },
      //删除
      shanchu:function(item){
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeaxle(item.axleId).then((response)=>{
            this.$message.success('删除成功');
            this.getlist()
          })
        })
      },

      //修改初始化
      bianji:function(item){
        this.logtitle = '修改轴管理'
        this.all = {
          "axleId": item.axleId,
          "devId":item.devId,
          "axleNote":item.axleNote,
          "yeNote":item.yeNote,
          "yeNum":item.yeNum,
          "libId":item.libId,
          "libNote":item.libNote
        }
        this.dangqian2.produceName = item.produceName
        this.log = true
      },


      //新建初始化
      logshow:function(){
        this.logtitle = '新增轴管理'
        this.all = {
          "axleId": "",
          "devId":this.youjiandangqian.value,
          "axleNote":"",
          "yeNote":"",
          "yeNum":"",
          "libId":"",
          "libNote":""
        }
        this.log = true
      },

      //新建修改确定
      add:function(){
        if(this.all.axleId){
          updateaxle(this.all).then((response)=>{
            this.$message.success('修改成功');
            this.log = false
            this.getlist()
          })
        }else{
          addaxle(this.all).then((response)=>{
            this.$message.success('新增成功');
            this.log = false
            this.getlist()
          })
        }
      },

      //检索
      searchgo:function(){
        this.search.page = 1
        this.getlist()
      },

      //获取
      getlist:function(){
        console.log(this.search)
        getaxle(this.search).then((response)=>{
          this.list = response.data

        })
      },

      //翻页
      fanye:function(val){
        this.search.page = val
        this.getlist()
      },




      //打开右键弹框
      openMenu(event, data, node, element) {
        console.log(data)
        //右键临时赋值
        this.youjiandangqian = data
        this.menuPosition.x = event.clientX;
        this.menuPosition.y = event.clientY;
        this.menuVisible = true;
        event.preventDefault();

        document.addEventListener('click', this.closeMenu);
      },
      //关闭
      closeMenu() {
        //右键取消赋值
        // this.youjiandangqian = ""
        this.menuVisible = false;
        console.log(this.menuVisible)
        document.removeEventListener('click', this.closeMenu); // 移除点击事件监听
      },

      //获取树 下面树相关点击方法
      getshebi:function(){
        gettreeshebei().then(response => {
          this.data = response.data
        })
      },
      handleCommand:function(val){
        this.youjiandangqian = ''
      },
      handleNodeExpand(data, node, instance) {
        this.zhankaiarray.push(data.treeId);
      },
      handleNodeCollapse(data, node, instance) {
        const index = this.zhankaiarray.indexOf(data.treeId);
        if (index > -1) {
          this.zhankaiarray.splice(index, 1);
        }
      },
      handleNodeClick(data) {
        this.menuVisible = false;

        if(data.type == 1){
          this.search = data.value
          this.getlist()
        }
      },
      filterNode(value, data) {
        // if (!value) return true;
        // return data.label.indexOf(value) !== -1;
      },
		}
	}
</script>


<style scoped >
  .custom-menu {
    position: fixed;
    background-color: #fff;
    border: 1px solid #ebeef5;
    border-radius: 5px;
    overflow: hidden;
    z-index: 3000;

  }
  .li{
    cursor: pointer; color: #005AFF; padding:10px 20px; font-size: 12px;
    &:hover{ background: #005AFF !important; color:#fff !important;}
  }
</style>
